<!-- 添加剂详情 -->
<template>
	<view v-if="!dataIsLoad">
		<!-- --dataloding-- -->
	</view>
  <view v-else class="wrap">
    <view class="rank_box">
      <view class="rank_title">
        <view class="rank_title_left">
          <view class="rank_title_spot line1" :class="retData.grade=='B'?'b_bg':retData.grade=='B-'?'b1_bg':retData.grade=='C'?'c_bg':retData.grade=='A'?'a_bg':''">
            {{retData.name}}
          </view>
          <view class="rank_title_tisp" :class="retData.grade=='B'?'b_color ':retData.grade=='B-'?'b1_color ':retData.grade=='C'?'c_color ':retData.grade=='A'?'a_color ':''">
            {{retData.grade_name}}级
          </view>
        </view>
      </view>

      <view class="rank_text-one" v-if="retData.sub_name">
        <view class="name">
          别名 :
        </view>
        <view class="value1">
          <text v-for="(item,index) in retData.sub_name.split('||')" :key="index">{{item}}</text>
        </view>
      </view>
      <view class="rank_text-one" v-if="retData.codeValue">
        <view class="name">
          编码 :
        </view>
        <view class="value">
          <text style="margin-left: 12rpx;">{{retData.codeValue}}</text>
        </view>
      </view>
      <view class="rank_text-one" v-if="retData.effect">
        <view class="name">
          功能 :
        </view>
        <view class="value">
          <text v-for="(item,index) in retData.effect.split(',')" :key="index">【{{item}}】</text>
        </view>
      </view>
    </view>
    <view class="label-box">
      <block v-for="(item,index) in retData.label_list" :key="index">
        <view class="li a_color a_border" style="background-color: #E7F8F0;" v-if="item.name.split('AA').length !=1" @click="labelListFun(item)">
          <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/26.png"></image>
          {{item.name}}
        </view>
      </block>
      <block v-for="(item,index) in retData.label_list" :key="index">
        <view class="li" v-if="item.name.split('AA').length ==1" @click="labelListFun(item)">
          <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/25.png"></image>
          {{item.name}}
        </view>
      </block>
    </view>
    <view class="tips_box" v-if="retData.explain && retData.explain.length">
      <view class="tips_head" :class="retData.grade=='B'?'b_bg':retData.grade=='B-'?'b1_bg':retData.grade=='C'?'c_bg':retData.grade=='A'?'a_bg':''">
        <view class="tips_head_left">
          <view class="tips_head_left_icon">
            <image :src="imgurl + '21.png'" mode="aspectFill"></image>
          </view>
          <view class="tips_head_left_text">
            危害说明
          </view>
        </view>
        <view class="tips_head_right">
          {{retData.explain.length}}项
        </view>
      </view>
      <view class="tips_info" v-for="(item,index) in retData.explain" :key="index" :class="retData.grade=='B'?'b_border':retData.grade=='B-'?'b1_border':retData.grade=='C'?'c_border':retData.grade=='A'?'a_border':''">
        {{item}}
      </view>
    </view>
    <view class="video-box" v-if="retData.video">
      <block v-if="!alterMain && !alterMainOne">
        <video :src="retData.video" controls :poster="retData.video_image"></video>
      </block>
      <block v-else>
        <image :src="retData.video_image" style="height:100%" mode="heightFix"></image>
      </block>
    </view>
    <view class="details" v-if="retData.detail && retData.detail.length" style="border: solid 4rpx #3D9CEF;">
      <view class="details_title">
        <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/details-2.png"></image>
      </view>
      <view class="details_d">
        <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/details-3.png"></image>
      </view>
      <view class="details_text" v-for="(item,index) in retData.detail" :key="index">
        <block v-for="(items,indexs) in item" :key="indexs">
		  <view  v-if="!items.main" v-html="items.text"></view>
          <view  v-else style="color:#2767E6;"  v-html="items.text"  @click="setAlterFunOne(items.text)"></view>
          </text>
        </block>
      </view>
      <view class="details_end">
        <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/details-1.png"></image>
      </view>
    </view>
    <view class="video-box" v-if="retData.coverImg">
      <image :src="retData.coverImg" mode="widthFix" @click="previewImageFun([retData.coverImg],0)"></image>
    </view>
    <view class="details" style="margin-top: 37rpx;" v-if="retData.refer && retData.refer.length">
      <view class="details_title" style="width: 414rpx;height: 94rpx;">
        <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/details-4.png"></image>
      </view>
      <view class="details_text" v-for="(item,index) in retData.refer" :key="index" style="line-height: 46rpx;margin-top: 4rpx;">
        <block v-if="item.length != 1">
          <block v-if="">
            <text :style="item[0].text.split('摘要').length != 1 ||item[0].text.split('说明').length != 1?'display: inline-block;background-color: #303A5E20;border-radius: 20rpx;padding: 10rpx 20rpx;':'display: inline-block;border-radius: 20rpx;padding: 10rpx 20rpx;'">
              <text style="width: 100rpx;display: inline-block;vertical-align: top;">{{item[0].text}}：</text>
              <text style="width: 490rpx;display: inline-block;vertical-align: top;color: #737373;">
                <block v-for="(items,indexs) in item" :key="indexs">
                  <block v-if="indexs != 0">
                    <text v-if="!items.main" style="display: inline-block;vertical-align: top;">
                      {{items.text}}
                    </text>
                    <text v-else style="display: inline-block;vertical-align: top;color:#2767E6;" @click="setAlterFun(items.text)">
                      {{items.text}}
                    </text>
                  </block>

                </block>
              </text>
            </text>
          </block>
        </block>
        <block v-else>
          <text style="padding: 25rpx 0 0 0;margin-bottom:25rpx;width: 100%;display: block;border-bottom: solid 1rpx #cccccc;"></text>
        </block>
      </view>
    </view>
    <view class="bot-text">所引用的文献，作者如有异议，请联系删除</view>
    <!-- <view class="gap"></view> -->
    <u-popup :show="alterMain" mode="center" @close="alterMain = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" bgColor="transparent">
      <view class="alter-box">
        <view class="main-box">
          {{mainText}}
        </view>
      </view>
    </u-popup>
    <u-popup :show="alterMainOne" mode="center" @close="alterMainOne = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" bgColor="transparent">
      <view class="alter-box">
        <view class="title-d">{{labelInfo.name}}</view>
        <view class="main-box">
          {{labelInfo.desc}}
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { goodsItemDetail } from '@/api/api.js'
export default {
  data() {
    return {
		dataIsLoad: false,
      mainText: '',
      alterMain: false,
      alterMainOne: false,
      labelInfo: {},
      retData: {
        explain: [],
        label_list: [],

      }
    };
  },
  onLoad(opition) {
    this.goodsItemDetailFun(opition.id)
  },
  methods: {
    labelListFun(item) {
      this.labelInfo = item;
      this.alterMainOne = true;
    },
    previewImageFun(url, index = 0) {
      // 节前过审暂时隐藏
      // uni.previewImage({
      // 	urls:url,
      // 	current:index
      // })
    },
    goodsItemDetailFun(id) {
      uni.showLoading({
        title: '获取中'
      })
      goodsItemDetail({
        id: id
      }).then((res) => {
        uni.hideLoading();
		this.dataIsLoad = true;
		
        if (res.data.refer && res.data.refer.length) {
          res.data.refer = res.data.refer.map((item) => {
            let arr = [{
              text: item,
              main: false
            }];
            res.data.refer_ext.forEach((items) => {
              let drr = []
              arr.forEach((itemd) => {
                let arr1 = itemd.text.split('[[' + items.key + ']]')
                if (arr1.length == 1) {

                  drr.push({
                    text: arr1[0]
                  })
                } else {
                  arr1.forEach((itemds, index) => {
                    drr.push({
                      text: itemds
                    })
                    if (index != arr1.length - 1) {
                      drr.push({
                        text: items.key
                      })
                    }
                  })
                }

              })
              arr = drr
            })
            arr = arr.map((items) => {
              let drr = res.data.refer_ext.map((dds) => { return dds.key })
              items.main = drr.indexOf(items.text) == -1 ? false : true
              return items
            })
            return arr
          })
          res.data.refer = res.data.refer.map((item) => {
            if (item[0].text) {
              const arr = item[0].text.split('：');
              item[0].text = arr[0];
              if (arr[1]) {
                item.splice(1, 0, {
                  marin: false,
                  text: arr[1]
                })
              }
            }

            return item;
          })
        }

        if (res.data.detail.length) {
          // res.data.detail = res.data.detail.map((item)=>{
          // 	 return item.replace(/<img /g, '<img style="width:100%;height:auto"')
          // })
          res.data.detail = res.data.detail.map((item) => {
            let arr = [{
              text: item,
              main: false
            }];
            res.data.detail_ext.forEach((items) => {
              let drr = []
              arr.forEach((itemd) => {
                let arr1 = itemd.text.split('[[' + items.key + ']]')
                if (arr1.length == 1) {
                  drr.push({
                    text: arr1[0].replace(/<p/g, '<p style="vertical-align: top;display: inline-block;"').replace(/color:black;/g, '')
                  })
                } else {
                  arr1.forEach((itemds, index) => {
                    drr.push({
                      text: itemds.replace(/<p/g, '<p style="vertical-align: top;display: inline-block;"').replace(/color:black;/g, '')
                    })
                    if (index != arr1.length - 1) {
                      drr.push({
                        text: items.key.replace(/<p/g, '<p style="vertical-align: top;display: inline-block;"').replace(/color:black;/g, '')
                      })
                    }
                  })
                }

              })
              arr = drr
            })
            arr = arr.map((items) => {
              let drr = res.data.detail_ext.map((dds) => { return dds.key })
              items.main = drr.indexOf(items.text) == -1 ? false : true
              return items
            })
            return arr
          })
          // console.log(res.data)
        }
		
        this.$set(this, "retData", res.data)
      }).catch((e) => {
        uni.hideLoading();
		this.dataIsLoad = true;
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    setAlterFun(value) {
      this.retData.refer_ext.forEach((item) => {
        if (item.key == value) {
          this.mainText = item.val
        }
      })
      this.alterMain = true
    },
    setAlterFunOne(value) {
      this.retData.detail_ext.forEach((item) => {
        if (item.key == value) {
          this.mainText = item.val
        }
      })
      this.alterMain = true
    }
  }
}
</script>

<style lang="scss" scoped>
.alter-box {
  width: 700rpx;
  border-radius: 20rpx;
  background-color: white;
  font-size: 30rpx;
  line-height: 40rpx;
  padding: 30rpx;
  color: #000000;
  box-sizing: border-box;
  overflow: hidden;
  .title-d {
    font-size: 34rpx;
    font-weight: 700;
    line-height: 80rpx;
    text-align: center;
    margin-bottom: 20rpx;
  }
  .main-box {
    max-height: 400rpx;
    overflow: auto;
  }
}
.line1 {
  white-space: nowrap;
  overflow: hidden; //文本超出隐藏
  text-overflow: ellipsis; //文本超出省略号替代
}
.d_color {
  color: #ee3a3a !important;
}

.d_bg {
  background: #ee3a3a !important;
}

.d_border {
  border: 1rpx solid #ee3a3a;
}

.c_color {
  color: #fec817 !important;
}

.c_bg {
  background: #fec817 !important;
}

.c_border {
  border: 1rpx solid #fec817 !important;
}

.b1_color {
  color: #6aa300 !important;
}

.b1_bg {
  background: #6aa300 !important;
}

.b1_border {
  border: 1rpx solid #6aa300 !important;
}

.b_color {
  color: #00cc70 !important;
}

.b_bg {
  background: #00cc70 !important;
}

.b_border {
  border: 1rpx solid #00cc70 !important;
}

.a_color {
  color: #30c285 !important;
}

.a_bg {
  background: #30c285 !important;
}

.a_border {
  border: 1rpx solid #30c285 !important;
}
.wrap {
  padding: 24rpx 0 0 0;
  background: #f5f5f5;
  .rank_box {
    width: 750rpx;
    // padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    .rank_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40rpx;

      .rank_title_left {
        overflow: hidden;
        width: 100%;
        .rank_title_spot {
          max-width: 440rpx;
          background: #ee3a3a;
          border-radius: 10rpx;
          line-height: 60rpx;
          text-align: center;
          color: white;
          font-size: 28rpx;
          font-weight: 700;
          position: relative;
          padding: 0 20rpx;
          display: inline-block;
          vertical-align: top;
        }

        .rank_title_text {
          margin-left: 20rpx;
          font-size: 34rpx;
          font-weight: bold;
          color: #434242;
          width: 450rpx;
          margin-right: 20rpx;
        }
        .rank_title_tisp {
          min-width: 100rpx;
          margin-left: 16rpx;
          height: 50rpx;
          padding: 0 16rpx;
          background: white;
          border: 0;
          border-radius: 26rpx;
          font-size: 32rpx;
          text-align: right;
          line-height: 50rpx;
          color: #ee3a3a;
          font-weight: 700;
          text-align: center;
          float: right;
          margin-top: 10rpx;
        }
      }
    }

    .rank_text {
      padding: 20rpx 0 0 40rpx;
      font-size: 28rpx;
      color: #737373;
      line-height: 50rpx;
      text {
        display: inline-block;
        vertical-align: top;

        border-radius: 25rpx;
        padding: 0 20rpx;
        background-color: white;
        margin: 0 0 8rpx 16rpx;
      }
    }
    .rank_text-one {
      padding: 20rpx 0 0 40rpx;
      font-size: 28rpx;
      color: #737373;
      line-height: 50rpx;
      overflow: hidden;
      .name {
        width: 80rpx;
        display: inline-block;
        vertical-align: top;
      }
      .value {
        width: calc(100% - 80rpx);
        float: right;
        text {
          display: inline-block;
          vertical-align: top;
        }
      }
      .value1 {
        width: calc(100% - 80rpx);
        float: right;
        text {
          display: inline-block;
          vertical-align: top;
          border-radius: 25rpx;
          padding: 0 20rpx;
          background-color: white;
          margin: 0 0 8rpx 16rpx;
        }
      }
    }
  }

  .gap {
    margin: 30rpx 0;
    width: 750rpx;
    height: 2rpx;
    background: #f5f5f5;
  }
  .tips_box {
    margin-top: 30rpx;
    .tips_head {
      margin: 0 24rpx;
      height: 60rpx;
      background: #ee3a3a;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 36rpx 0 46rpx;
      .tips_head_left {
        display: flex;
        align-items: center;
        .tips_head_left_icon {
          width: 28rpx;
          height: 25rpx;
          font-size: 0;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .tips_head_left_text {
          margin-left: 10rpx;
          font-size: 28rpx;
          color: #ffffff;
        }
      }
      .tips_head_right {
        font-size: 28rpx;
        color: #ffffff;
      }
    }
    .tips_info {
      margin: 0 24rpx;
      background: #ffffff;
      border: 1rpx solid rgba(238, 58, 58, 0.5);
      padding: 20rpx 36rpx 20rpx 46rpx;
      font-size: 28rpx;
      line-height: 36rpx;
      color: #434242;
      word-wrap: break-word;
    }
  }
  .details {
    margin: 30rpx auto;
    padding: 30rpx;
    box-sizing: border-box;
    width: 690rpx;
    background-color: white;
    border-radius: 30rpx;
    position: relative;
    overflow: hidden;
    .details_title {
      font-size: 34rpx;
      font-weight: bold;
      color: #434242;
      width: 350rpx;
      height: 80rpx;
      margin: 0 auto;
      position: relative;
      top: -34rpx;
      margin-bottom: -20rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .details_d {
      width: 124rpx;
      height: 94rpx;
      position: relative;
      top: -70rpx;
      margin-bottom: -50rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .details_text {
      margin-top: 17rpx;
      font-size: 28rpx;
      color: #5b5b5b;
      line-height: 50rpx;
      word-wrap: break-word;
      // text{
      // 	color: #306AAC;
      // }
    }
    .details_end {
      width: 650rpx;
      height: 76rpx;
      margin: 20rpx auto 0 auto;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.label-box {
  width: 700rpx;
  overflow: hidden;
  line-height: 50rpx;
  margin: 20rpx auto;
  .li {
    display: inline-block;
    vertical-align: top;
    margin: 10rpx 10rpx 0 0;
    padding: 0 20rpx;
    font-size: 26rpx;
    border-radius: 8rpx;
    border: none !important;
    color: #ee3a3a;
    background-color: #ffeeeb;
    image {
      width: 36rpx;
      height: 36rpx;
      display: inline-block;
      vertical-align: top;
      margin: 8rpx 10rpx 0 0;
    }
  }
}
.video-box {
  width: 690rpx;
  height: 394rpx;
  overflow: hidden;
  margin: 30rpx auto;
  border-radius: 30rpx;
  position: relative;
  z-index: 1;
  background: #000000;
  text-align: center;
  image {
    width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 2;
  }
  video {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
  }
}
.bot-text {
  color: #a1a1a1;
  text-align: center;
  font-size: 28rpx;
  line-height: 60rpx;
  padding: 0 0 30rpx 0;
}
</style>
